<template>
    <div>
        <ul>
            <li>
                <div class="label">1.双向绑定:</div>
                <div style="background: palegoldenrod;">
                    <child-input v-model="text" />
                    值回显：{{ text }}
                </div>
            </li>
            <li>
                <div class="label">2-1.props&函数:</div>
                <div>{{ count }}</div>
                <button @click="fn">点击+1</button>
            </li>
            <li>
                <div class="label">2-2.props&emit:</div>
                <div>{{ name }}</div>
                <button @click="emit('updateName', 'vivo手机')">切换</button>
            </li>
            <li>
                <div class="label">3.provide&inject:</div>
                <div :style="{ color }">{{ color }}</div>
            </li>
            <li>
                <div class="label">4.attrs(没有被props接收):</div>
                <h4>子组件：</h4>
                <div style="margin-bottom: 10px;">
                    <span>{{ attrs.title }}</span>
                    <span>{{ attrs.price }}</span>
                    <span>{{ attrs.typeColor }}</span>
                </div>
                <h4>孙组件：</h4>
                <child-input :isInput="false" :="$attrs" />
            </li>
            <li>
                <div class="label">5.refs&expose:</div>
                <child-input ref="childInputRef" :isInput="false">
                    <button @click="handleClick">点击^2</button>
                </child-input>
            </li>
            <li>
                <div class="label">6.localStorage(相关页面PageA):</div>
                <button @click="setItem('user', { name: '小明', age: 18 })">点击存储</button>
            </li>
            <li>
                <div class="label">7.全局数据(相关页面PageB):</div>
                <div>通过getters获取：{{ state.getUserName }}</div>
                <div>通过state获取：{{ state.count }}</div>
            </li>
        </ul>
    </div>
</template>

<script setup>
import childInput from './child-input.vue'
import { ref, defineProps, defineEmits, inject, useAttrs } from 'vue'
// 双向绑定数据源
const text = ref('')

// 接收父组件传递的props和emit方法
const props = defineProps({
    count: Number,
    fn: Function,
    name: {
        type: String,
        default: '小明'
    },
})
const emit = defineEmits(['updateName'])

// 获取父组件传递的attrs
const attrs = useAttrs();
// console.log(attrs);

// 依赖注入
const color = inject('color');

// 获取子组件实例
const childInputRef = ref(null);
const handleClick = () => {
    childInputRef.value.handleClick();
    console.log(childInputRef.value.count);

};

// 存储数据到localStorage中
const setItem = (key, value) => {
    // localStorage.setItem(key, JSON.stringify(value))
    localStorage.setItem('user', JSON.stringify({ name: '小明', age: 18 }))
}

// 设置全局数据
window.globalData = { message: '全局消息' };

// 引入定义好的实例
import { maninState } from "@/store/index.js"
const state = maninState();

</script>

<style>
ul {
    overflow-y: scroll;
}

li {
    background: palegoldenrod;
    margin: 10px 0;
    padding: 10px;
}

.label {
    color: red;
}
</style>